﻿

<div class="row">
    <div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
        <h1 class="page-title txt-color-blueDark"><i class="fa-fw fa fa-home"></i> Dashboard <span>> My Dashboard</span></h1>
    </div>
    <div class="col-xs-12 col-sm-5 col-md-5 col-lg-8">
        <ul id="sparks" class="">
            <li class="sparks-info">
                <h5> Total Pedidos <span class="txt-color-blue">$47,171</span></h5>
                <div class="sparkline txt-color-blue hidden-mobile hidden-md hidden-sm">
                    1300, 1877, 2500, 2577, 2000, 2100, 3000, 2700, 3631, 2471, 2700, 3631, 2471
                </div>
            </li>
            <li class="sparks-info">
                <h5> Efectividad <span class="txt-color-purple"><i class="fa fa-arrow-circle-up"></i>&nbsp;45%</span></h5>
                <div class="sparkline txt-color-purple hidden-mobile hidden-md hidden-sm">
                    110,150,300,130,400,240,220,310,220,300, 270, 210
                </div>
            </li>
            <li class="sparks-info">
                <h5> Pedidos Nuevos <span class="txt-color-greenDark"><i class="fa fa-shopping-cart"></i>&nbsp;2447</span></h5>
                <div class="sparkline txt-color-greenDark hidden-mobile hidden-md hidden-sm">
                    110,150,300,130,400,240,220,310,220,300, 270, 210
                </div>
            </li>
        </ul>
    </div>
</div>
<form class="smart-form">

    <section class="col col-2">
        <div class="form-group">
            <label></label>
            <div class="input-group">
                <input type="text" name="mydate" placeholder="Desde" class="form-control datepicker" data-dateformat="mm/dd/yy" id="my_start_date">
                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
            </div>
        </div>
    </section>
    <section class="col col-2">
        <div class="form-group">
            <label></label>
            <div class="input-group">
                <input type="text" name="mydate" placeholder="Hasta" class="form-control datepicker" data-dateformat="mm/dd/yy" id="my_end_date">
                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
            </div>
        </div>
    </section>
    <section class="col col-2">
        <div class="form-group">
            <label></label>
            <div class="input-group">
                <a class="btn btn-primary btn-circle btn" id="btn_kpi"><i class="glyphicon glyphicon-send"></i></a>
            </div>
        </div>
    </section>
</form>
<!-- widget grid -->
<section id="widget-grid" class="">
    <!-- row -->
    <div class="row">
        <article class="col-sm-12">
            <!-- new widget -->
            <div class="jarviswidget" id="wid-id-0" data-widget-togglebutton="false" data-widget-editbutton="false" data-widget-fullscreenbutton="false" data-widget-colorbutton="false" data-widget-deletebutton="false">
                <!-- widget options:
                usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">

                data-widget-colorbutton="false"
                data-widget-editbutton="false"
                data-widget-togglebutton="false"
                data-widget-deletebutton="false"
                data-widget-fullscreenbutton="false"
                data-widget-custombutton="false"
                data-widget-collapsed="true"
                data-widget-sortable="false"

                -->
                <header>
                    <span class="widget-icon"> <i class="glyphicon glyphicon-stats txt-color-darken"></i> </span>
                    <h2>KPI </h2>
                    <ul class="nav nav-tabs pull-right in" id="myTab">
                        <li class="active">
                            <a data-toggle="tab" href="#s1"><i class="glyphicon glyphicon-ok txt-color-darken"></i> <span class="hidden-mobile hidden-tablet">Gráfico Gestión</span></a>
                        </li>
                    </ul>
                </header>
                <!-- widget div-->
                <div class="no-padding">
                    <!-- widget edit box -->
                    <div class="jarviswidget-editbox">
                        test
                    </div>
                    <!-- end widget edit box -->
                    <div class="widget-body">
                        <!-- content -->
                        <div id="myTabContent" class="tab-content">
                            <div class="tab-pane fade active in padding-10 no-padding-bottom" id="s1">

                                <div class="widget-body-toolbar bg-color-white smart-form" id="rev-toggles">

                                    <div class="btn-group hidden-phone pull-right">
                                        <a class="btn dropdown-toggle btn-xs btn-default" data-toggle="dropdown"><i class="fa fa-cog"></i> More <span class="caret"> </span> </a>
                                        <ul class="dropdown-menu pull-right">
                                            <li>
                                                <a href="javascript:void(0);"><i class="fa fa-file-text-alt"></i> Export to PDF</a>
                                            </li>
                                            <li>
                                                <a href="javascript:void(0);"><i class="fa fa-question-sign"></i> Help</a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div id="myfirstchart" class="chart-large has-legend-unique"></div>
                                </div>
                                <div class="show-stat-microcharts">
                                    <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
                                        <div class="easy-pie-chart txt-color-orangeDark" data-percent="33" data-pie-size="50">
                                            <span class="percent percent-sign">35</span>
                                        </div>
                                        <span class="easy-pie-title"> Efectividad <i class="fa fa-caret-up icon-color-bad"></i> </span>
                                        <ul class="smaller-stat hidden-sm pull-right">
                                            <li>
                                                <span class="label bg-color-greenLight"><i class="fa fa-caret-up"></i> 97%</span>
                                            </li>
                                            <li>
                                                <span class="label bg-color-blueLight"><i class="fa fa-caret-down"></i> 44%</span>
                                            </li>
                                        </ul>
                                        <div class="sparkline txt-color-greenLight hidden-sm hidden-md pull-right" data-sparkline-type="line" data-sparkline-height="33px" data-sparkline-width="70px" data-fill-color="transparent">
                                            130, 187, 250, 257, 200, 210, 300, 270, 363, 247, 270, 363, 247
                                        </div>
                                    </div>
                                    <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
                                        <div class="easy-pie-chart txt-color-greenLight" data-percent="78.9" data-pie-size="50">
                                            <span class="percent percent-sign">78.9 </span>
                                        </div>
                                        <span class="easy-pie-title"> Penetracion <i class="fa fa-caret-down icon-color-good"></i></span>
                                        <ul class="smaller-stat hidden-sm pull-right">
                                            <li>
                                                <span class="label bg-color-blueDark"><i class="fa fa-caret-up"></i> 76%</span>
                                            </li>
                                            <li>
                                                <span class="label bg-color-blue"><i class="fa fa-caret-down"></i> 3%</span>
                                            </li>
                                        </ul>
                                        <div class="sparkline txt-color-blue hidden-sm hidden-md pull-right" data-sparkline-type="line" data-sparkline-height="33px" data-sparkline-width="70px" data-fill-color="transparent">
                                            257, 200, 210, 300, 270, 363, 130, 187, 250, 247, 270, 363, 247
                                        </div>
                                    </div>
                                    <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
                                        <div class="easy-pie-chart txt-color-blue" data-percent="23" data-pie-size="50">
                                            <span class="percent percent-sign">23 </span>
                                        </div>
                                        <span class="easy-pie-title"> Cobertura <i class="fa fa-caret-up icon-color-good"></i></span>
                                        <ul class="smaller-stat hidden-sm pull-right">
                                            <li>
                                                <span class="label bg-color-darken">10GB</span>
                                            </li>
                                            <li>
                                                <span class="label bg-color-blueDark"><i class="fa fa-caret-up"></i> 10%</span>
                                            </li>
                                        </ul>
                                        <div class="sparkline txt-color-darken hidden-sm hidden-md pull-right" data-sparkline-type="line" data-sparkline-height="33px" data-sparkline-width="70px" data-fill-color="transparent">
                                            200, 210, 363, 247, 300, 270, 130, 187, 250, 257, 363, 247, 270
                                        </div>
                                    </div>
                                    <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
                                        <div class="easy-pie-chart txt-color-darken" data-percent="36" data-pie-size="50">
                                            <span class="percent degree-sign">36 <i class="fa fa-caret-up"></i></span>
                                        </div>
                                        <span class="easy-pie-title"> Presupuesto <i class="fa fa-caret-down icon-color-good"></i></span>
                                        <ul class="smaller-stat hidden-sm pull-right">
                                            <li>
                                                <span class="label bg-color-red"><i class="fa fa-caret-up"></i> 124</span>
                                            </li>
                                            <li>
                                                <span class="label bg-color-blue"><i class="fa fa-caret-down"></i> 40 F</span>
                                            </li>
                                        </ul>
                                        <div class="sparkline txt-color-red hidden-sm hidden-md pull-right" data-sparkline-type="line" data-sparkline-height="33px" data-sparkline-width="70px" data-fill-color="transparent">
                                            2700, 3631, 2471, 2700, 3631, 2471, 1300, 1877, 2500, 2577, 2000, 2100, 3000
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- end s1 tab pane -->

                        </div>
                        <!-- end content -->
                    </div>
                </div>
                <!-- end widget div -->
            </div>
            <!-- end widget -->
        </article>
    </div>

    <!-- end row -->
    <!-- row -->
</section>
